<template>
	<view>
		<scroll-view class="scroll-view" scroll-y @scrolltolower="loadMore" @refresherrefresh="refresh" refresher-enabled :refresher-triggered="isRefreshing">
			<view class="audio-list">
				<view class="audio-item" v-for="(item, index) in historyList" :key="index" @click="handleClick(item)">
					<view class="image-wrapper">
						<image :src="item.coverImg" mode="aspectFill" />
					</view>
					<view class="audio-item-info">
						<view class="audio-item-title">{{ item.title }}</view>
						<view class="audio-item-desc">{{ item.album }} / {{ item.author }}</view>
						<view class="audio-item-foot">
							<view class="">
								<view class="icon-item" v-if="AccountInfo.miniProgram.envVersion == 'release'">
									<u-icon name="clock" size="14" />
									<text>{{ formatTime(item.duration) }}</text>
								</view>
							</view>
							<view class="del_box" @click.stop="handleDel(item)">
								<u-icon name="close" size="14"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="loading" v-if="loading">加载中...</view>
			<view class="no-more" v-if="noMore">没有更多数据了</view>
			<u-empty text="暂无数据" mode="list" v-if="historyList.length === 0"></u-empty>
		</scroll-view>
		<tabbarVue :selectedTabbar="1"></tabbarVue>
	</view>
</template>

<script>
import tabbarVue from '../../components/tabbar.vue';
export default {
	components: {
		tabbarVue
	},
	data() {
		return {
			historyList: [],
			page: 1,
			loading: false,
			noMore: false,
			isRefreshing: false,
			AccountInfo: {}
		};
	},
	onLoad() {
		this.getHistoryList();
		let AccountInfo = wx.getAccountInfoSync();
		this.AccountInfo = AccountInfo;
	},

	methods: {
		// 获取订单列表
		async getHistoryList() {
			this.loading = true;
			try {
				// 这里替换为实际的API调用
				// const res = await this.$api.getOrders({
				//   page: this.page,
				//   limit: 10
				// })

				let PostData = {
					ac: 'gethistory',
					page: this.page
				};
				uni.$u.http.post('', PostData).then((res) => {
					let newList = res.list.map((item) => {
						return {
							id: item.id,
							title: item.title,
							album: item.album,
							author: item.author,
							coverImg: item.cover_url,
							mp3file_id: item.mp3file_id,
							is_finished: item.is_finished,
							part: item.part,
							listenTime: item.create_time,
							percent: (Math.ceil((item.play_position / item.play_duration) * 100) || 0) + '%',
							currentTime: item.play_position,
							duration: item.play_duration // 1000到10000之间的随机数
						};
					});
					console.log('获取播放历史', newList);
					if (this.page === 1) {
						this.historyList = newList;
					} else {
						this.historyList = [...this.historyList, ...newList];
					}

					this.noMore = newList.length < 10;
				});
			} catch (error) {
				console.error(error);
			} finally {
				this.loading = false;
				this.isRefreshing = false;
			}
		},

		handleClick(item) {
			uni.navigateTo({
				url: `/pages/album/play?mp3file_id=${item.mp3file_id}`
			});
		},
		// 加载更多
		loadMore() {
			if (this.loading || this.noMore) return;
			this.page++;
			this.getHistoryList();
		},

		// 下拉刷新
		refresh() {
			this.isRefreshing = true;
			this.page = 1;
			this.noMore = false;
			this.getHistoryList();
		},
		formatTime(seconds) {
			const min = Math.floor(seconds / 60);
			const sec = Math.floor(seconds % 60);
			return `${min < 10 ? '0' + min : min}:${sec < 10 ? '0' + sec : sec}`;
		},
		//删除选中项目
		handleDel(item) {
			uni.showModal({
				content: '确定删除该条历史记录?',
				success: (res) => {
					if (res.confirm) {
						if (res.confirm) {
							let PostData = {
								ac: 'delhistory',
								id: item.id
							};
							uni.showLoading();
							uni.$u.http.post('', PostData).then((res) => {
								that.page = 1;
								that.histroyList = [];
								that.gethistroyList();
								uni.showToast({
									title: '删除成功',
									icon: 'none'
								});
							});
						} else if (res.cancel) {
						}
					} else if (res.cancel) {
					}
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.scroll-view {
	height: calc(100vh - 50px);
	padding: 20rpx 0;
	.audio-list {
		display: flex;
		flex-direction: column;
		gap: 40rpx;

		.audio-item {
			display: flex;
			padding: 0 40rpx;
			align-items: center;

			.image-wrapper {
				width: 150rpx;
				height: 150rpx;
				margin-right: 30rpx;
				flex-shrink: 0;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.audio-item-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				overflow: hidden;

				.audio-item-title {
					font-size: 30rpx;
					color: #333;
					font-weight: bold;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
					line-height: 1.4;
					max-height: 2.8em;
				}

				.audio-item-star {
					display: flex;
					align-items: center;
					gap: 10rpx;
				}

				.audio-item-desc {
					display: inline-block;
					font-size: 24rpx;
					color: #999;
					line-height: 1.4;
					margin: 8rpx 0;
					width: fit-content;
					max-width: 400rpx;
					background-color: #f5f5f5;
					padding: 8rpx 10rpx;
					border-radius: 10rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.audio-item-view {
					font-size: 24rpx;
					color: #999;
					display: flex;
					align-items: center;
					gap: 10rpx;
				}
				.audio-item-foot {
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 10rpx;
					font-size: 24rpx;
					color: #999;
					.icon-item {
						display: flex;
						align-items: center;
						gap: 10rpx;
					}
					.del_box {
						width: 50rpx;
						height: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}
	.loading,
	.no-more {
		text-align: center;
		padding: 20rpx;
		color: #999;
		font-size: 28rpx;
	}
	.empty {
		text-align: center;
		padding: 20rpx;
		color: #999;
		font-size: 28rpx;
	}
}
</style>